<!--
  根据部门选择用户弹窗
  Created by liujialing
  使用说明：
  <depart-admin v-model="departDialog" :multiple="departMultiple" @getAdmin="getAdmin" :admin-list="departAdminList"></depart-admin>
  字段说明：
    v-model(Boolean): 弹窗显隐
    multiple(Boolean): 是否多选
    admin-list(Array): 回显初始值
    getAdmin(Function): 获取返回值
-->

<template>
  <el-dialog title="选择用户" :visible.sync="dialogVisible" width="80%">
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>部门</span>
          </div>
          <el-tree :data="treeList" @node-click="handleNodeClick"></el-tree>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>部门用户</span>
          </div>
          <el-table v-loading="loading" ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column property="name" label="姓名">
            </el-table-column>
            <el-table-column property="username" label="账户">
            </el-table-column>
            <el-table-column property="sex" label="性别">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选择用户</span>
          </div>
          <el-table ref="singleTable" :data="selectList" style="width: 100%">
            <el-table-column property="name" label="姓名">
            </el-table-column>
            <el-table-column property="username" label="账户">
            </el-table-column>
            <el-table-column property="sex" label="性别">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="delSelect(scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as baseApi from '@/api/common/index';

export default {
  name: 'departAdmin',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    adminList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: this.value,
      loading: false,
      treeList: [],
      tableData: [],
      selectList: JSON.parse(JSON.stringify(this.adminList)),
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val;
      if(val) {
        this.selectList = JSON.parse(JSON.stringify(this.adminList))
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
    baseApi.getDepartTree().then(res => {
      this.treeList = res.data;
    });
  },
  methods: {
    /* 点击树节点 */
    handleNodeClick(e) {
      if (!e.children || !e.children.length) {
        console.log(e.id);
        this.getAdmin(e.id);
      }
    },
    /* 获取用户 */
    getAdmin(id) {
      if (this.loading) return;
      this.loading = true;
      baseApi.getDepartAdmin({ departId: id }).then(res => {
        this.tableData = res.data.rows;
        this.loading = false;
      })
    },
    /* 单选 */
    handleCurrentChange(value) {
      if (!value) return;
      if (this.multiple) {
        if (this.juegeRepeat(value.id)) return;
        this.selectList.push(value);
      } else {
        this.selectList = [value];
      }
    },
    /* 判断重复选择 */
    juegeRepeat(id) {
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].id == id) {
          return true;
        }
      }
      return false;
    },
    /* 删除已选 */
    delSelect(index) {
      this.selectList.splice(index, 1)
    },
    confirm() {
      console.log(this.selectList);
      this.$emit('getAdmin',this.selectList);
      this.dialogVisible = false;
    }
  }
}
</script>
